<template>
	<view class="login">
		<view class="login-bgc"></view>
		
		<view class="login-card">
			<text class="login-card__title">登录</text>
			
			<view class="login-card__sub-title-box">
				<view class="login-card__sub-title">
					学生/教师登录
				</view>

				<view class="login-card__sub-title login-card__sub-title--inactive">
					游客登录
				</view>
			</view>

			
			<view class="login-card__input-box flex">
				<image class="login-card__input-icon" src="/static/images/login/userNum.png" mode="aspectFill"></image>
				<input type="text" class="login-card__input" v-model="userInfo.username"/>
			</view>
			
			<view class="login-card__input-box flex">
				<image class="login-card__input-icon" src="/static/images/login/password.png" mode="aspectFill"></image>
				<input type="safe-password" :password="isPassword" class="login-card__input"  v-model="userInfo.password"/>
				<image class="login-card__input-icon" src="/static/images/login/lookPassword.png" mode="aspectFill" @click="onClickSeePassword"></image>
			</view>
			
			<view class="login-card__tips" @click="onClickShowTips">忘记密码?</view>
			
			<view class="login-card__btn" @click="onClickLogin">
				登录
			</view>
		</view>
		
		<!-- 忘记密码的遮罩层 -->
		<van-overlay @click="onClickHideTips" :show="showTips">
			<view class="login__tips">
				<view class="login__tips-title">忘记密码</view>
				<view class="login__tips-content">
					教师/学生忘记密码可以通过绑定的手机号进行登录，若手机号不可用可通过以下办法进行重置：   
					1.联系学校信息中心办公室（第一课室大楼南座一楼办公室）    
					2.通过其他手机号通过游客进行登录，然后联系客服，提供相应的个人信息后，客服进行更改密码 
					注意：教师/学生第一次登陆时为学号后6位
				</view>
			</view>
		</van-overlay>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { userLogin } from '@/utils/apis.js';
	import { userStore } from '@/store/userStore.js';

	const userInfo = reactive({
		username:'',
		password:''
	})
	
	// 是否要查看密码
	const isPassword = ref(true);
	
	const showTips = ref(false);
	
	function onClickSeePassword(){
		isPassword.value = !isPassword.value
	}
	
	async function onClickLogin(){
		if(!userInfo.username || !userInfo.password) {
			uni.showToast({
				title: '请输入账号和密码',
				icon: 'none'
			})
			return
		}

		// console.log(userInfo);
		
		try {
			const res = await userLogin(userInfo)
			// 存储token
			uni.setStorageSync('token', res.data.token)
			
			// 初始化全局用户信息
			const globalUserInfo = {
				username: '脏脏小包',
				gender: '女',
				intro: '没有个人简介~',
				phone: '18062897891',
				school: '华南师范大学',
				password: '123456'
			};
			
			// 更新全局状态
			userStore.setLoginStatus(true);
			userStore.userInfo = globalUserInfo;
			
			// 存储用户信息到本地
			uni.setStorageSync('userInfo', globalUserInfo)
			
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
			
			// 返回上一页
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}, 1500)

		} catch(e) {
			uni.showToast({
				title: '登录失败，请稍后重试',
				icon: 'none'
			})
		}
	}
	
	function onClickShowTips(){
		console.log('出现遮罩层');
		showTips.value = true;
	}
	
	function onClickHideTips(){
		console.log('关闭遮罩层');
		showTips.value = false;
	}
</script>

<style lang="scss" scoped>
.login{
	width: 100%;
	height: 100%;
	background-color: #81d3f8;
	position: relative;
	&-bgc{
		// margin-top: 370rpx;
		// height: ;
		width: 100%;
		height: 1130rpx;
		background-color: #f2f2f2;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: absolute;
		bottom: 0;
	}
	
	&-card{
		width: 690rpx;
		height: 800rpx;
		position: fixed;
		top: 200rpx;
		left: 0;
		right: 0;
		// transform: translateY(-50%);
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		// 这里设置text-align:center也会让input的内容也居中
		// text-align: center;
		box-sizing: border-box;
		padding-top: 58rpx;
		&__title{
			// text-align: center;
			display: block;
			width: fit-content;
			margin: 0 auto;
			font-size: 45rpx;
			color: #333333;
			font-weight: 700;
			margin-bottom: 40rpx;
		}

		&__sub-title-box{
			width: fit-content;
			margin: 0 auto;
			display: flex;
			align-items: center;
			height: 56rpx;
			background-color: #cfeffe;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}
		
		&__sub-title{
			width: 236rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			border-radius: 20rpx;
			margin: 0 auto;
			// margin-top: 58rpx;
			// margin-bottom: 71rpx;
			background-color: #81d3f8;
			font-size: 28rpx;
			color: #000000;
			&--inactive{
				background-color: transparent;
			}

		}
		
		&__input-box{
			width: 570rpx;
			margin: 0 auto;
			margin-bottom: 58rpx;
			padding-bottom: 18rpx;
			border-bottom: 2rpx solid #797979;
		}
		
		&__input{
			// margin-bottom: 18rpx;
			flex: 1;
			
			&-icon{
				width: 45rpx;
				height: 45rpx;
				margin-left: 20rpx;
				margin-right: 36rpx;
			}
		}
		
		&__tips{
			width: 100%;
			box-sizing: border-box;
			text-align: end;
			margin-top: 33rpx;
			padding-right: 84rpx;
			font-size: 24rpx;
			color: #797979;
		}
		
		&__btn{
			width: 250rpx;
			height: 71rpx;
			line-height: 71rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 85rpx;
			font-size: 36rpx;
			border-radius: 30rpx;
			background-color: #81d3f8;
		}
	}
	
	// 遮罩层
	&__tips{
		width: 600rpx;
		height: 500rpx;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		box-sizing: border-box;
		padding-top: 62rpx;
		&-title{
			width: fit-content;
			margin: 0 auto;
			margin-bottom: 62rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
		}
		
		&-content{
			width: 500rpx;
			margin: 0 auto;
			font-size: 24rpx;
			color: #333333;
			// height: 280rpx;
		}
	}
}
</style>
